<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
      <!-- 真正的导航栏内容 -->
      <view>
        <uni-nav-bar left-icon="left" right-icon="cart" title="会员中心" />
      </view>
    </view>
  </view>
  <!-- 弹层组件 -->
  <uni-popup ref="popup" type="dialog">
    <!--确认框 -->
    <uni-popup-dialog
      title=" "
      content="暂时无法在线支付(已关闭)，请联系专属红娘/客服"
      :duration="2000"
      :before-close="true"
      confirmText="联系红娘"
      cancelText="返回"
      @close="close"
      @confirm="confirm"
    ></uni-popup-dialog>
  </uni-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import type { Popup } from '@/types/Popup'
// 设置安全区域
const statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']

// 页面加载关闭执行
onReady(() => {
  open()
})

// 获取弹层组件
const popup = ref<Popup | null>(null)

// 打开
const open = () => {
  if (popup.value) {
    popup.value.open()
  }
}

// 关闭
const close = () => {
  if (popup.value) {
    uni.navigateBack()
    popup.value.close()
  }
}

// 确认
const confirm = () => {
  if (popup.value) {
    uni.switchTab({
      url: '/pages/matchmaker/matchmaker',
    })
    popup.value.close()
  }
}
</script>

<style scoped></style>
